<template>
  <div>
    <div class="tips" ref="tips1">
      <div class="box" ref="box">
        <svg
          t="1629618007057"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1128"
          width="3rem"
          height="3rem"
        >
          <path
            d="M882.37056 219.88352a45.7216 45.7216 0 0 1 0 91.42272 45.7216 45.7216 0 0 1 0-91.42272z m-731.41248 0a45.7216 45.7216 0 0 0 0 91.42272 45.7216 45.7216 0 0 0 0-91.42272z m502.84544 137.13408a45.7216 45.7216 0 0 0 91.42272 0c0-25.23136-20.48-45.71136-45.71136-45.71136-25.23136 0-45.71136 20.48-45.71136 45.71136z m266.65984-15.2064a245.1968 245.1968 0 0 1-25.94816 75.17184c-0.7168-20.09088-2.10944-24.04352-4.21888-57.40544 0 0 7.3216-9.43104 7.3216-17.79712h-30.47424c0 8.36608 7.3216 17.79712 7.3216 17.79712-2.07872 33.45408-3.4816 37.3248-4.21888 57.55904-8.96-16.67072-20.48-42.71104-25.91744-75.32544-19.6096 0.09216-68.59776 2.02752-68.59776 53.32992v12.50304c54.04672 14.55104 60.94848 58.09152 60.94848 78.92992v101.09952c0 32.44032-11.13088 53.504-25.41568 66.63168v48.09728a35.55328 35.55328 0 0 0 35.59424 35.56352 35.52256 35.52256 0 0 0 35.5328-35.56352 35.52256 35.52256 0 0 0 35.5328 35.56352 35.55328 35.55328 0 0 0 35.59424-35.56352V549.57056s35.5328 0 35.5328-53.32992v-101.09952c-0.02048-51.27168-48.9472-53.23776-68.58752-53.32992zM196.66944 587.6736v-101.09952c0-20.82816 6.90176-64.36864 60.94848-78.92992v-12.50304c0-51.31264-48.98816-53.248-68.59776-53.32992a246.24128 246.24128 0 0 1-25.91744 75.32544c-0.74752-20.23424-2.14016-24.10496-4.21888-57.55904 0 0 7.3216-9.43104 7.3216-17.79712h-30.47424c0 8.36608 7.3216 17.79712 7.3216 17.79712-2.10944 33.36192-3.51232 37.3248-4.21888 57.40544a244.85888 244.85888 0 0 1-25.94816-75.17184c-19.64032 0.09216-68.56704 2.05824-68.56704 53.32992v101.09952c0 53.32992 35.5328 53.32992 35.5328 53.32992v152.82176a35.55328 35.55328 0 0 0 35.59424 35.56352 35.52256 35.52256 0 0 0 35.5328-35.56352 35.52256 35.52256 0 0 0 35.5328 35.56352 35.55328 35.55328 0 0 0 35.59424-35.56352v-48.09728c-14.30528-13.11744-25.43616-34.19136-25.43616-66.62144z m137.14432-276.36736a45.7216 45.7216 0 0 0 0 91.42272 45.7216 45.7216 0 0 0 0-91.42272z m403.79392 121.92768a245.1968 245.1968 0 0 1-25.94816 75.17184c-0.7168-20.09088-2.10944-24.04352-4.21888-57.40544 0 0 7.3216-9.43104 7.3216-17.79712h-30.47424c0 8.36608 7.3216 17.79712 7.3216 17.79712-2.07872 33.45408-3.4816 37.3248-4.21888 57.55904-8.96-16.67072-20.48-42.71104-25.91744-75.32544-19.6096 0.09216-68.59776 2.02752-68.59776 53.32992v12.50304c54.04672 14.55104 60.94848 58.09152 60.94848 78.92992v101.09952c0 32.44032-11.13088 53.504-25.41568 66.63168v48.09728a35.55328 35.55328 0 0 0 35.59424 35.56352 35.52256 35.52256 0 0 0 35.5328-35.56352 35.52256 35.52256 0 0 0 35.5328 35.56352 35.55328 35.55328 0 0 0 35.59424-35.56352V641.00352s35.5328 0 35.5328-53.32992v-101.09952c-0.01024-51.28192-48.9472-53.248-68.58752-53.34016z m-358.08256 245.8624v-101.09952c0-20.82816 6.90176-64.36864 60.94848-78.92992v-12.50304c0-51.31264-48.98816-53.248-68.59776-53.32992a246.24128 246.24128 0 0 1-25.91744 75.32544c-0.74752-20.23424-2.14016-24.10496-4.21888-57.55904 0 0 7.3216-9.43104 7.3216-17.79712h-30.47424c0 8.36608 7.3216 17.79712 7.3216 17.79712-2.10944 33.36192-3.51232 37.3248-4.21888 57.40544a244.85888 244.85888 0 0 1-25.94816-75.17184c-19.64032 0.09216-68.56704 2.05824-68.56704 53.32992v101.09952c0 53.32992 35.5328 53.32992 35.5328 53.32992v152.82176a35.55328 35.55328 0 0 0 35.59424 35.56352 35.52256 35.52256 0 0 0 35.5328-35.56352 35.52256 35.52256 0 0 0 35.5328 35.56352 35.55328 35.55328 0 0 0 35.59424-35.56352v-48.09728c-14.30528-13.11744-25.43616-34.18112-25.43616-66.62144z m91.42272-230.656a45.7216 45.7216 0 0 0 91.42272 0 45.7216 45.7216 0 0 0-91.42272 0z m45.71136-198.08256a45.7216 45.7216 0 0 1 0 91.42272 45.7216 45.7216 0 0 1 0-91.42272zM333.81376 158.9248a45.7216 45.7216 0 0 1 0 91.42272 45.7216 45.7216 0 0 1 0-91.42272z m365.70112 0a45.7216 45.7216 0 0 1 0 91.42272 45.7216 45.7216 0 0 1 0-91.42272zM516.6592 97.97632a45.7216 45.7216 0 0 1 0 91.42272 45.7216 45.7216 0 0 1 0-91.42272z m38.10304 426.69056a245.1968 245.1968 0 0 1-25.94816 75.17184c-0.7168-20.09088-2.10944-24.04352-4.21888-57.40544 0 0 7.3216-9.43104 7.3216-17.79712h-30.47424c0 8.36608 7.3216 17.79712 7.3216 17.79712-2.07872 33.45408-3.4816 37.3248-4.21888 57.55904-8.96-16.67072-20.48-42.71104-25.91744-75.32544-19.6096 0.09216-68.59776 2.02752-68.59776 53.32992v101.09952c0 53.32992 35.5328 53.32992 35.5328 53.32992V885.248a35.55328 35.55328 0 0 0 35.59424 35.56352 35.52256 35.52256 0 0 0 35.5328-35.56352 35.52256 35.52256 0 0 0 35.5328 35.56352 35.55328 35.55328 0 0 0 35.59424-35.56352V732.42624s35.5328 0 35.5328-53.32992v-101.09952c-0.02048-51.28192-48.9472-53.248-68.58752-53.32992z"
            fill="#333333"
            p-id="1129"
          ></path>
        </svg>
        <div class="areaCount">该区域人数</div>
        <div class="crowding">拥挤</div>
        <div class="crowdBar">
          <div style="float:left">
            稀疏
          </div>
          <div class="bar" style="background-color:green"></div>
          <div class="bar" style="background-color:yellow"></div>
          <div class="bar" style="background-color:orange"></div>
          <div class="bar" style="background-color:red"></div>
          <div style="float:left">
            拥挤
          </div>
        </div>
        <div class="propose" style="margin-top:-0.8rem;">人群拥挤，建议您避峰出行</div>
      </div>
    </div>
    <div class="tips" ref="tips2">
      <div class="box" ref="box">
        <svg
          t="1629617906701"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="996"
          width="3rem"
          height="3rem"
        >
          <path
            d="M736 531.2l-25.6 44.8c83.2 44.8 128 134.4 128 224l51.2 0C889.6 691.2 832 588.8 736 531.2zM505.6 128C390.4 128 300.8 224 300.8 339.2c0 76.8 38.4 140.8 96 179.2C281.6 556.8 192 672 192 806.4l51.2 0c0-140.8 121.6-262.4 268.8-262.4 115.2 0 211.2-96 211.2-211.2S620.8 128 505.6 128zM505.6 492.8c-83.2 0-153.6-70.4-153.6-153.6 0-83.2 70.4-153.6 153.6-153.6 83.2 0 153.6 70.4 153.6 153.6C665.6 422.4 595.2 492.8 505.6 492.8zM883.2 364.8c0-89.6-70.4-166.4-166.4-166.4 6.4 12.8 19.2 32 25.6 44.8 57.6 12.8 96 64 96 121.6 0 70.4-57.6 128-128 128-12.8 19.2-25.6 32-38.4 44.8 12.8 0 25.6-6.4 38.4-6.4C806.4 531.2 883.2 454.4 883.2 364.8zM902.4 518.4l-19.2 38.4c64 38.4 102.4 108.8 102.4 179.2L1024 736C1024 646.4 979.2 563.2 902.4 518.4zM0 736l44.8 0c0-76.8 38.4-147.2 102.4-179.2L121.6 518.4C44.8 563.2 0 646.4 0 736zM345.6 531.2C332.8 518.4 320 505.6 307.2 486.4c-70.4 0-128-57.6-128-128 0-57.6 44.8-108.8 96-121.6C288 224 294.4 211.2 300.8 192c-89.6 0-166.4 76.8-166.4 166.4 0 89.6 76.8 166.4 166.4 166.4C320 531.2 332.8 531.2 345.6 531.2z"
            p-id="997"
          ></path>
        </svg>
        <div class="areaCount">该区域人数</div>
        <div class="crowding" style="background-color:orange">适中</div>
        <div class="crowdBar">
          <div style="float:left">
            稀疏
          </div>
          <div class="bar" style="background-color:green"></div>
          <div class="bar" style="background-color:yellow"></div>
          <div class="bar" style="background-color:orange"></div>
          <div class="bar" style="background-color:red"></div>
          <div style="float:left">
            拥挤
          </div>
        </div>
        <div class="propose" style="margin-top:-1rem;color:limegreen">
          人群聚集适中，适宜出行，请佩戴口罩，做好个人防护
        </div>
      </div>
    </div>
    <div class="tips" ref="tips3">
      <div class="box" ref="box">
        <svg
          t="1629618330531"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1264"
          width="3rem"
          height="3rem"
        >
          <path
            d="M353.767327 111.785996c-83.096372 0-150.459575 67.786537-150.459576 151.405372s67.363204 151.405724 150.459576 151.405724 150.459223-67.786537 150.459222-151.405724-67.363204-151.405372-150.459222-151.405372z m0 265.58073c-62.663503 0-113.462042-51.117803-113.462042-114.175358 0-63.057555 50.798539-114.175711 113.462042-114.175711 62.66315 0 113.462042 51.118508 113.462042 114.175711 0 63.057555-50.798892 114.175358-113.462042 114.175358zM575.903515 670.447867c5.864219-5.867747 15.126391-6.66326 21.921237-2.403119 4.890906-2.268359 9.651285-4.805887 14.373917-7.409032a45.498058 45.498058 0 0 1 2.552345-1.412874c2.926642-1.494365 5.943947-2.380895 9.070966-2.388303-39.539647-111.65688-145.519986-191.584605-270.055006-191.584604-158.291587 0-286.612615 129.127829-286.612615 288.414954 0 4.770256 0.121003 9.512643 0.349603 14.226103h55.788223a12.253724 12.253724 0 0 1-0.047625-1.041046c0-0.221191 0.006703-0.441325 0.017992-0.6604h-0.867127a238.883944 238.883944 0 0 1-0.284691-11.583094c0-129.683454 104.47292-234.813598 233.346397-234.813598 100.103419 0 185.480497 63.432205 218.613353 152.529673 0.604661-0.634999 1.21814-1.259063 1.833031-1.87466zM670.232673 256.108303c-83.096372 0-150.459223 67.786537-150.459222 151.405371 0 83.619188 67.362851 151.405724 150.459222 151.405725 83.097077 0 150.459575-67.786184 150.459576-151.405725 0-83.618835-67.362498-151.405372-150.459576-151.405371z m0 265.581082c-62.66315 0-113.461689-51.118156-113.461689-114.175358s50.798539-114.175711 113.461689-114.175711c62.663503 0 113.462042 51.118508 113.462042 114.175711s-50.798539 114.175358-113.462042 114.175358z"
            fill="#4b4c4d"
            p-id="1265"
          ></path>
          <path
            d="M670.232673 609.572946c-158.291587 0-286.612262 129.127477-286.612262 288.414955 0 4.770256 0.121003 9.512643 0.349603 14.226103h55.78787a12.400127 12.400127 0 0 1-0.047625-1.040694c0-0.221544 0.006703-0.441677 0.018345-0.660752h-0.867127a238.882533 238.882533 0 0 1-0.285044-11.583094c0-129.683454 104.47292-234.813246 233.346397-234.813246 128.874182 0 233.346397 105.129792 233.346397 234.813246 0 3.883727-0.094192 7.745581-0.280105 11.583094h-0.745066c0.011289 0.219075 0.017639 0.439208 0.017639 0.660752 0 0.350308-0.018344 0.696735-0.047272 1.040694h52.286554c0.228247-4.713459 0.344311-9.456199 0.344311-14.226103 0.000353-159.287478-128.320322-288.414954-286.612615-288.414955z"
            fill="#4b4c4d"
            p-id="1266"
          ></path>
        </svg>
        <div class="areaCount">该区域人数</div>
        <div class="crowding" style="background-color:green">稀疏</div>
        <div class="crowdBar">
          <div style="float:left">
            稀疏
          </div>
          <div class="bar" style="background-color:green"></div>
          <div class="bar" style="background-color:yellow"></div>
          <div class="bar" style="background-color:orange"></div>
          <div class="bar" style="background-color:red"></div>
          <div style="float:left">
            拥挤
          </div>
        </div>
        <div class="propose" style="color:#1890ff">人群较少，可以出行</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "outtingTips",
  props: {
    crowd:{
      type:Number,
      default: -100
    },
  },
  mounted(){
    if(this.crowd<0){
      this.$refs.tips1.style.display = 'none';
      this.$refs.tips2.style.display = 'none';
      this.$refs.tips3.style.display = 'none';
    }else if(this.crowd>=8000){
      this.$refs.tips1.style.display = 'block';
      this.$refs.tips2.style.display = 'none';
      this.$refs.tips3.style.display = 'none';
    }else if(this.crowd<8000&&this.crowd>2000){
      this.$refs.tips1.style.display = 'none';
      this.$refs.tips2.style.display = 'block';
      this.$refs.tips3.style.display = 'none';
    }else{
      this.$refs.tips1.style.display = 'none';
      this.$refs.tips2.style.display = 'none';
      this.$refs.tips3.style.display = 'block';
    }

  },
  watch:{
    crowd(v){
      if(v<0){
        this.$refs.tips1.style.display = 'none';
        this.$refs.tips2.style.display = 'none';
        this.$refs.tips3.style.display = 'none';
      }else if(v>=8000){
        this.$refs.tips1.style.display = 'block';
        this.$refs.tips2.style.display = 'none';
        this.$refs.tips3.style.display = 'none';
      }else if(v<8000&&v>2000){
        this.$refs.tips1.style.display = 'none';
        this.$refs.tips2.style.display = 'block';
        this.$refs.tips3.style.display = 'none';
      }else{
        this.$refs.tips1.style.display = 'none';
        this.$refs.tips2.style.display = 'none';
        this.$refs.tips3.style.display = 'block';
      }
    }
  },
};
</script>

<style>
.tips {
  height: 7rem;
  margin: 5%;
  border-radius: 2rem;
  /* border-width: 1px;
  border-color: #1890ff;
  border-style: solid; */
  background-color: #f8f8f8;
}

.box {
  padding: 1vh 2vw;
}

.areaCount {
  font-size:1rem;
  display: inline-block;
  vertical-align: top;
  margin: 0.8rem 0.2rem 0rem 2rem;
  font-weight: bold;
}

.crowding {
  display: inline-block;
  height: 1rem;
  width: 2rem;
  color: white;
  font-size: 5px;
  vertical-align: top;
  background-color: red;
  margin: 1rem 0;
  border-radius: 0.2rem;
  text-align: center;
  line-height: 1rem;
}

.propose {
  color: brown;
  font-size: 0.5rem;
  margin-left: 5rem;
  margin-top: -0.5rem;
}

.crowdBar {
  margin-left: 2rem;
  margin-top: 1rem;
  font-size: 0.5rem;
  vertical-align: top;
  color: darkgray;
  float: right;
}

.bar {
  width: 1rem;
  height: 0.3rem;
  float: left;
  margin: 0.5rem 0.03rem;
  border-radius: 0.1rem;
  vertical-align: top;
}
</style>
